<template>
  <section @click="clickCurrent('current')" @mousedown="clickCurrent('dragging')">
    <div
      :class="['custorm--modelbox', 'marketlottery-show', (custormCurrent == custormIndex)?'drag active':'drag']"
    >
      <div
        v-if="custormItemData.params.isshow == '2'"
        class="noshow"
        v-bind:style="{'background-image':`url(${getPath('noshow.png')})`}"
      ></div>
      <div style="overflow: hidden;">
        <div v-if="custormItemData.style.display == '1'" class="es-seckill-group style-row">
          <div class="flex es-seckill-title">
            <p class="title">
              <span
                class="seckill-title"
                v-if="custormItemData.style.text.length > 0"
              >{{custormItemData.style.text}}</span>
            </p>
            <p>
              更多
              <i class="el-icon-arrow-right"></i>
            </p>
          </div>
          <div class="group">
            <div>
              <!-- ---- -->
              <div
                v-for="(item, index) in custormItemData.params.choostype == '3'? custormItemData.params.listitem:custormItemData.data && custormItemData.data.length>0?custormItemData.data:custormItemData.params.defaultData"
                :key="index"
                class="es-seckill-col"
              >
                <div class="image">
                  <!-- <span v-bind:style="{background:custormItemData.style.iconcolor}">{{custormItemData.style.text}}</span> -->
                  <img
                    :src="`${custormItemData.params.choostype == '3'?getPath('default_picture.png'):item.edit?getPath(item.edit.thumb):item.image[0]['file_path']}`"
                    alt
                    draggable="false"
                  />
                  <span
                    class="group-img-btn"
                    :class="{'active':custormItemData.params.choostype == '3'?'':item.edit?'':item.luck_state != 2}"
                  >{{custormItemData.params.choostype == '3'?'抽奖中':item.edit?item.edit.userNum:luckStateType[`${item.luck_state}`]}}</span>
                </div>
                <div class="detail">
                  <p class="title line-hide">
                    <span
                      v-if="custormItemData.style.name == '1'"
                    >{{custormItemData.params.choostype == '3'?'这里是商品标题':item.edit?item.edit.name:item.luck_title}}</span>
                  </p>
                  <div class="subtitle line-hide flex-row flex-justify-b flex-align-c">
                    <span class="sub-price" v-if="custormItemData.style.price == '1'">
                      <span class="icon">中奖数:</span>
                      {{custormItemData.params.choostype == '3'?'20':item.edit?item.edit.price:item.luck_count}}
                    </span>
                  </div>
                  <div class="subtitle line-hide flex-row flex-justify-b flex-align-c">
                    <span class="sub-price line-through">
                      <span
                        class="icon"
                        style="white-space: nowrap;"
                      >{{custormItemData.params.choostype == '3'?'人数满20人自动开奖':item.edit?item.edit.oldprice:luck_mode(item)}}</span>
                    </span>
                    <!-- <div class="group-btn">
                                            <span class="sub-price line-through" v-if="custormItemData.style.oldprice == '1'"><span class="icon">已拼{{custormItemData.params.choostype == '1'?'100':item.edit?item.edit.sales:item.is_sold}}件</span></span>
                    </div>-->
                  </div>
                </div>
              </div>
              <!-- ---- -->
            </div>
          </div>
        </div>

        <div v-if="custormItemData.style.display == '2'" class="es-seckill-group style-col">
          <div class="flex es-seckill-title">
            <p class="title">
              <span
                class="seckill-title"
                v-if="custormItemData.style.text.length > 0"
              >{{custormItemData.style.text}}</span>
            </p>
            <p>
              更多
              <i class="el-icon-arrow-right"></i>
            </p>
          </div>
          <div class="group">
            <div>
              <!-- ---- -->
              <div
                v-for="(item, index) in custormItemData.params.choostype == '3'? custormItemData.params.listitem:custormItemData.data && custormItemData.data.length>0?custormItemData.data:custormItemData.params.defaultData"
                :key="index"
                class="es-seckill-col flex-row"
              >
                <div class="image">
                  <!-- <span v-bind:style="{background:custormItemData.style.iconcolor}">{{custormItemData.style.text}}</span> -->
                  <img
                    :src="`${custormItemData.params.choostype == '3'?getPath('default_picture.png'):item.edit?getPath(item.edit.thumb):item.image[0]['file_path']}`"
                    alt
                    draggable="false"
                  />
                </div>
                <div class="detail flex-col flex-justify-b">
                  <div class="flex-col">
                    <p class="title line-hide" style="margin-bottom:2px;">
                      <span
                        v-if="custormItemData.style.name == '1'"
                      >{{custormItemData.params.choostype == '3'?'这里是商品标题':item.edit?item.edit.name:item.luck_title}}</span>
                    </p>
                    <!-- <div class="sales-num">
                                                <div class="flex-row flex-align-c">
                                                    <div class="flex-row flex-align-c">
                                                        <span class="orders-gray">已拼{{custormItemData.params.choostype == '1'?'100':item.edit?item.edit.sales:item.is_sold}}件</span>
                                                    </div>
                                                    <div class="subtitle line-hide">
                                                        <p>
                                                            <span class="sales-btn">{{custormItemData.params.choostype == '1'?'2':item.edit?item.edit.userNum:item.group_number}}人团</span>
                                                        </p>
                                                    </div>
                                                </div>
                    </div>-->
                  </div>
                  <div class="sales-num col-num">
                    <div class="flex-row flex-justify-b flex-align-c">
                      <div class="flex-col">
                        <span class="sub-price" v-if="custormItemData.style.price == '1'">
                          <span class="icon">中奖数:</span>
                          {{custormItemData.params.choostype == '3'?'20':item.edit?item.edit.price:item.luck_count}}
                        </span>
                        <p
                          class="orders-gray"
                        >{{custormItemData.params.choostype == '3'?'人数满20人自动开奖':item.edit?item.edit.oldprice:luck_mode(item)}}</p>
                      </div>
                      <div class="flex-row flex-align-c" style="align-self: flex-end;">
                        <div
                          class="group-btn col-list"
                          :class="{'active':custormItemData.params.choostype == '3'?'':item.edit?'':item.luck_state != 2}"
                        >
                          <span>{{custormItemData.params.choostype == '3'?'抽奖中':item.edit?item.edit.userNum:luckStateType[`${item.luck_state}`]}}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- ---- -->
            </div>
          </div>
        </div>

        <!-- <div v-if="custormItemData.style.display == '3'" class="es-seckill-group style-row display">
          <div class="group">
            <div>
              <div
                v-for="(item, index) in custormItemData.params.choostype == '3'? custormItemData.params.listitem:custormItemData.data && custormItemData.data.length>0?custormItemData.data:custormItemData.params.defaultData"
                :key="index"
                class="es-seckill-col"
              >
                <div class="image">
                  <img
                    :src="`${custormItemData.params.choostype == '3'?getPath('default_picture.png'):item.edit?getPath(item.edit.thumb):item.image[0]['file_path']}`"
                    alt
                    draggable="false"
                  />
                  <span
                    class="group-img-btn love"
                    :class="{'active':custormItemData.params.choostype == '3'?'':item.edit?'':item.luck_state != 2}"
                  >
                    <svg-icon icon-class="love" style="margin-right:5px;" />
                    {{custormItemData.params.choostype == '3'?'3761':item.edit?item.edit.love:item.luck_like}}人喜欢
                  </span>
                </div>
                <div class="detail">
                  <p class="title line-hide">
                    <span
                      class="group-img-btn"
                      v-if="(custormItemData.params.choostype == '3'?'活动标签':item.edit?item.edit.luck_tag: item.luck_tag)['length']"
                    >{{custormItemData.params.choostype == '3'?'活动标签':item.edit?item.edit.luck_tag: item.luck_tag}}</span>
                    <span
                      v-if="custormItemData.style.name == '1'"
                    >{{custormItemData.params.choostype == '3'?'这里是商品标题':item.edit?item.edit.name:item.luck_title}}</span>
                  </p>
                  <div class="subtitle line-hide flex-row flex-justify-b flex-align-c">
                    <span class="sub-price" v-if="custormItemData.style.price == '1'">
                      <span class="icon">价值:</span>
                      {{custormItemData.params.choostype == '3'?'20':item.edit?item.edit.price:item.luck_price}}
                      <span
                        class="icon"
                      >元</span>
                    </span>
                    <div
                      class="group-btn col-list"
                      :class="{'active':custormItemData.params.choostype == '3'?'':item.edit?'':item.luck_state != 2}"
                    >
                      <span>{{custormItemData.params.choostype == '3'?'抽奖中':item.edit?item.edit.userNum:luckStateType[`${item.luck_state}`]}}</span>
                    </div>
                  </div>
                  <div class="subtitle line-hide flex-row flex-justify-b flex-align-c">
                    <span class="sub-price line-through">
                      <span
                        class="icon"
                        style="white-space: nowrap;"
                      >{{custormItemData.params.choostype == '3'?'人数满20人自动开奖':item.edit?item.edit.oldprice:luck_mode(item)}}</span>
                    </span>
                    <div class="group-btn">
                      <span
                        class="sub-price line-through"
                        v-if="custormItemData.style.oldprice == '1'"
                      >
                        <span
                          class="icon"
                        >共{{custormItemData.params.choostype == '3'?'100':item.edit?item.edit.sales:item.luck_count}}份奖品</span>
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>-->
        <div class="newStyleTwo" v-if="custormItemData.style.display == '4'">
          <div class="marginSet">
            <div
              class='marginSet'
              v-for="(item, index) in custormItemData.params.choostype == '3'? custormItemData.params.listitem:custormItemData.peridosData && custormItemData.peridosData.length>0?custormItemData.peridosData:custormItemData.params.defaultData"
              :key="index"
            >
              <div class="storeTitle"  v-show="custormItemData.params.showStore=='1'">
                <img
                  class="storeLogo"
                  :src="`${custormItemData.params.choostype == '3'?getPath('default_picture.png'):item.edit?getPath(item.edit.thumb):item.image[0]['file_path']}`"
                  alt
                />
                <span>店铺名称 赞助</span>
              </div>
              <div class="disFlex">
                <div class="imgWrap">
                  <div class="luckTip">
                    <span>抽奖</span>
                  </div>
                  <div class>
                    <img
                      class="newImg"
                      :src="`${custormItemData.params.choostype == '3'?getPath('default_picture.png'):item.edit?getPath(item.edit.thumb):item.image[0]['file_path']}`"
                      alt
                      draggable="false"
                    />
                  </div>
                </div>
                <div class="disYBtween">
                  <div class="moreTwoLine">
                    <span
                      class="fenqiTip"  v-if="item.luck_periods&&item.luck_periods.length>0"
                    >第{{custormItemData.params.choostype == '3'?'1':item.edit?item.edit.peridos:item.peridosOne.luck_period_id}}期</span>

                    <span
                      class="goodsTitle"
                    >{{custormItemData.params.choostype == '3'?'这里是商品标题':item.edit?item.edit.name:item.luck_title}}</span>
                  </div>
                  <div class>
                    <div class="disXBtween" style="width:230px;margin-bottom:8px">
                      <span>{{custormItemData.params.choostype == '3'?'人数满20人自动开奖':item.edit?item.edit.oldprice:luck_mode(item)}}</span>
                      <span>x{{custormItemData.params.choostype == '3'?'100':item.edit?item.edit.sales:item.luck_count}}份</span>
                    </div>
                    <div class="disXBtween PriceColor">
                      <div class>
                        <span>价值:￥</span>
                        <span
                          class="price"
                        >{{custormItemData.params.choostype == '3'?'29.9':item.edit?item.edit.price:item.luck_price}}</span>
                      </div>
                      <div class="openLuck">
                        <span>参与抽奖</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 风格二 -->
        <div  class="newStyleTree" v-if="custormItemData.style.display == '3'">
          <div
            class='marginSet'
           v-for="(item, index) in custormItemData.params.choostype == '3'? custormItemData.params.listitem:custormItemData.peridosData && custormItemData.peridosData.length>0?custormItemData.peridosData:custormItemData.params.defaultData"
              :key="index"
          >


            <div class="storeTitle" v-show="custormItemData.params.showStore=='1'">
                <img
                  class="storeLogo"
                  :src="`${custormItemData.params.choostype == '3'?getPath('default_picture.png'):item.edit?getPath(item.edit.thumb):item.image[0]['file_path']}`"
                  alt
                />
                <span>店铺名称 赞助</span>
              </div>
            <div class>
              <div class="luckImg">
                <div class="luckTipTwo">
                  <span>抽奖</span>

                </div>
                <div class="openBottom">
                  <span>{{custormItemData.params.choostype == '3'?'人数满20人自动开奖':item.edit?item.edit.oldprice:luck_mode(item)}}</span>
                  <span>x{{custormItemData.params.choostype == '3'?'100':item.edit?item.edit.sales:item.luck_count}}份</span>
                </div>
                <img class="luckImgUrl"
                  :src="`${custormItemData.params.choostype == '3'?getPath('default_picture.png'):item.edit?getPath(item.edit.thumb):item.image[0]['file_path']}`"
                  alt
                />

              </div>
              <div class="contentWrap">
                <div class="moreTwoLine">
               <span
                      class="peridosNum" v-if="item.luck_periods&&item.luck_periods.length>0"
                    >第{{custormItemData.params.choostype == '3'?'1':item.edit?item.edit.peridos:item.peridosOne.luck_period_id}}期</span>

                  <span
                      class="goodsTitle"
                    >{{custormItemData.params.choostype == '3'?'这里是商品标题':item.edit?item.edit.name:item.luck_title}}</span>
              </div>
              <div class="disXBtween">
                <div class="" style="color:#FF4343">
                  <span>价值:￥</span>
                  <span class="priceNum">{{custormItemData.params.choostype == '3'?'29.9':item.edit?item.edit.price:item.luck_price}}</span>
                </div>
                <div class="openLuck">
                  <span>参与抽奖</span>
                </div>
              </div>
              </div>
            </div>
          </div>
        </div>


      </div>

      <div class="btn-edit-del" @click="delCurrent">
        <span class="btn-del iconfont icon icon-close"></span>
      </div>
    </div>
  </section>
</template>

<script>
import defaultConfig from "./utils/showConfig";
import { parseTime } from "@/utils/index";
export default {
  mixins: [defaultConfig.mixins],
  props: {
    defaultConfig: {
      type: Object,
      default: function () {
        return defaultConfig;
      },
    },
  },
  computed: {
    luck_mode() {
      return function (itemRow) {
        // 人数满{{item.luck_begin_number}}人自动开奖
        let luck_mode_msg = "";
        const { luck_mode, luck_begin_number, luck_begin_time,hand_text } = itemRow;
        // console.log(luck_mode, luck_begin_number, luck_begin_time, 'luck_mode, luck_begin_number, luck_begin_time')
        switch (`${luck_mode}`) {
          case "1":

            if(itemRow.luck_periods.length>0){
luck_mode_msg = `${parseTime(
              Number(itemRow.peridosOne.lottery_time) * 1000,
              "{y}-{m}-{d}"
            )} 自动开奖`;
            }else{
 luck_mode_msg = `${parseTime(
              Number(luck_begin_time) * 1000,
              "{y}-{m}-{d}"
            )} 自动开奖`;
            }

            break;
          case "2":
            luck_mode_msg = `人数满${luck_begin_number}人自动开奖`;
            break;
          case "3":
            luck_mode_msg = hand_text;
            break;
        }
        return luck_mode_msg;
      };
    },
  },
  data() {
    return {
      luckStateType: {
        1: "已开奖",
        2: "抽奖中",
        3: "未开奖",
      },
    };
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.storeTitle {
  padding: 10px 0;
  display: flex;
  justify-content: start;
  align-items: center;
  .storeLogo {
    width: 25px;
    height: 25px;
    border-radius: 50%;
  }
  span {
    margin-left: 10px;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 500;
    // line-height: 25px;
  }
}
.newStyleTwo {
  padding: 16px;
  .goodsTitle {
    font-size: 14px;
    font-weight: 500;
  }
  .moreTwoLine {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .marginSet {
    margin-bottom: 20px;
  }
  .PriceColor {
    color: #ff4343;
    .price {
      font-size: 18px;
      font-family: PingFang SC;
      font-weight: bold;
    }
  }
  .openLuck {
    // padding: 6px !important;
    background: rgb(255, 215, 61);
    height: 25px;
    text-align: center;
    line-height: 25px;
    padding: 2px 5px;
    color: #000000;
    border-radius: 2px;
  }
  .disFlex {
    display: flex;
  }
  .disXBtween {
    display: flex;
    justify-content: space-between;
  }
  .disYBtween {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
  }
  .luckTip {
    padding: 0px 6px;
    background: linear-gradient(
      50deg,
      rgba(251, 203, 23, 1) 0%,
      rgba(255, 233, 113, 1) 100%
    );
    border-radius: 4px;
    color: #733b01;
    position: absolute;
    top: 0px;
    left: 0px;
  }
  .newImg {
    width: 100px;
    height: 100px;
    border-radius: 4px;
  }
  .imgWrap {
    width: 100px;
    height: 100px;
    border-radius: 4px;
    margin-right: 10px;
    position: relative;
  }
  .fenqiTip {
    display: inline-block !important;
    background: rgb(255, 215, 61);
    height: 18px;
    text-align: center;
    line-height: 16px;
    padding: 2px 5px;
    color: #000000;

    font-size: 12px;
  }
}
.newStyleTree {
  margin: 16px;
   .openLuck {
    // padding: 6px !important;
    background: rgb(255, 215, 61);
    height: 25px;
    text-align: center;
    line-height: 25px;
    padding: 2px 5px;
    color: #000000;
    border-radius: 2px;
  }
  .moreTwoLine {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .goodsTitle {
    font-size: 14px;
    font-weight: 500;
  }
  .contentWrap{
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    height:70px;
  }
  .priceNum{
     font-size: 18px;
      font-family: PingFang SC;
      font-weight: bold;
  }
   .disXBtween {
    display: flex;
    justify-content: space-between;
  }
  .luckImg{
    position: relative;
  height: 180px;
        margin: 4px 0 8px;
        width: 100%;
        border-radius: 3px;
border-radius:6px 6px 0px 0px;
    .luckImgUrl{
      width: 100%;
      height: 100%;
      border-radius:6px 6px 0px 0px;
    }
  }
  .luckTipTwo {
    padding: 0px 6px;
    background: linear-gradient(
      50deg,
      rgba(251, 203, 23, 1) 0%,
      rgba(255, 233, 113, 1) 100%
    );
    border-radius: 4px;
    color: #733b01;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 5;

  }
  .openBottom {
    background: rgba(0, 0, 0, 0.5);
    color: #ffffff;
    display: flex;
    justify-content: space-between;
    padding: 3px 10px;
    position: absolute;
    bottom: 0;
    width: 100%;
    // height: 25px;
    // span{
    //   width: 50%;
    // }
  }
  .peridosNum{
     display: inline-block !important;
    background: rgb(255, 215, 61);
    height: 18px;
    text-align: center;
    line-height: 16px;
    padding: 2px 5px;
    color: #000000;

    font-size: 12px;
  }
}
.custorm--modelbox.marketlottery-show {
  .flex,
  .flex-column {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
  .group {
    padding-bottom: 3px;
  }
  .group-btn {
    color: #fff;
    line-height: 22px;
    border-radius: 8px;
    font-size: 12px;
    height: 22px;
    &.col-list {
      background: #ffcc00;
      width: 70px;
      height: 25px;
      line-height: 27px;
      padding: 2px 0;
      text-align: center;
      color: #333333;
      font-weight: bold;
      box-sizing: content-box;
      border-radius: 30px;
      &.active {
        background: rgba(204, 204, 204, 1);
        color: #ffffff;
      }
    }
  }

  .es-seckill-title {
    margin: 20px 20px 6px;
    height: 22px;
    font-size: 11px;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
  }

  .es-seckill-title .title {
    .seckill-title {
      font-size: 18px;
      font-weight: 700;
      color: #3d404d;
      background: #fff;
    }

    font-size: 16px;

    img {
      vertical-align: middle;
      zoom: 0.5;
    }

    & + p {
      color: #999;
      margin-right: -5px;
    }
  }

  .es-seckill-title span {
    background: #fff;
    display: inline-block;
    color: #333;
    text-align: center;
    line-height: 18px;
    width: 17px;
  }

  .es-seckill-title span:first-of-type {
    width: auto;
    background: #fe504f;
    color: #fff;
    font-size: 12px;
    margin-right: 8px;
    padding: 1px 3px;
  }

  .es-seckill-group.style-row .group {
    overflow: hidden;

    & > div {
      font-size: 0;
    }
  }

  .es-seckill-group.style-row {
    .group {
      margin-top: 13px;
    }
    .group-img-btn {
      display: inline-block !important;
      background: rgb(255, 215, 61);
      height: 18px;
      text-align: center;
      line-height: 16px;
      padding: 2px 5px;
      color: #000000;
      text-align: center;
      font-size: 12px;
      &.active {
        color: #ffffff;
        background: rgba(204, 204, 204, 1);
      }
      &.love {
        position: absolute;
        top: 18px;
        right: 15px;
        background: rgba(255, 255, 255, 0.7);
        border-radius: 30px;
        height: 24px;
        line-height: 23px;
        color: #fd463e;
        padding-left: 10px;
        padding-right: 10px;
      }
    }
    .group .es-seckill-col {
      display: inline-block;
      padding: 0 15px;
      width: 100%;
      box-sizing: border-box;
      border-radius: 2px;
      .image {
        position: relative;
        height: 180px;
        margin: 4px 0 8px;
        width: 100%;
        border-radius: 3px;
        img {
          height: 100%;
          width: 100%;
          object-fit: cover;
          border-radius: 3px;
          display: block;
        }
      }
    }
  }

  .es-seckill-group.style-row .group .es-seckill-col .detail {
    width: 100%;
    font-size: 12px;

    .title {
      height: 41px;
      font-size: 14px;
      color: #000000;
    }

    .subtitle {
      //   height: 24px;
      line-height: 1;
      padding-bottom: 5px;
      .sub-price {
        font-size: 14px;

        .icon {
          font-size: 12px;
        }

        &:not(.line-through) {
          font-size: 20px;
          color: #fd463e;
          font-weight: 600;
        }

        &.line-through {
          color: #999;
          text-decoration: none;
        }
      }
    }

    .sales-num {
      .num {
        font-size: 14px;
        color: #999;
      }

      .progress {
        width: 50px;
        height: 10px;
        border-radius: 10px;
        line-height: 10px;
        background: rgb(242, 242, 242);

        .progress-num {
          display: inline-block;
          background: #fd463e;
          width: 40%;
          height: 10px;
          border-radius: 10px;
        }
      }

      // .sales-btn{
      //     border: 1px solid #fd463e;
      //     color: #fd463e;
      //     padding: 0 10px;
      //     border-radius: 30px;
      //     font-size: 14px;
      //     height: 26px;
      // }
    }
  }
  .es-seckill-group.style-row .group .es-seckill-col .detail .price .num {
    color: #999ca7;
    font-size: 9px;
    line-height: 25px;
    margin-left: 6px;
  }

  .es-seckill-group.style-row .group .es-seckill-col .detail .price .flex {
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
  }

  .es-seckill-group.style-row .group .es-seckill-col .detail .price span {
    font-size: 16px;
  }

  //   style2
  .es-seckill-group.style-col .group {
    overflow: hidden;

    & > div {
      white-space: nowrap;
      font-size: 0;
    }
  }

  .es-seckill-group.style-col .group .es-seckill-col {
    padding: 15px;
    box-sizing: border-box;
    border-radius: 2px;
    // border-bottom: 1px solid #999;
    padding-bottom: 0;

    .image {
      position: relative;
      height: 85px;
      width: 85px;
      margin: 4px 0 4px;
      border-radius: 5px;
      //   .group-img-btn {
      //     display: block !important;
      //     position: absolute;
      //     background: -webkit-gradient(
      //       linear,
      //       left top,
      //       right top,
      //       from(#fe504f),
      //       to(#fe854f)
      //     );
      //     background: -o-linear-gradient(left, #fe504f, #fe854f);
      //     background: linear-gradient(90deg, #fe504f, #fe854f);
      //     border-radius: 3px 0 3px 0;
      //     top: 10px;
      //     left: 0;
      //     height: 18px;
      //     line-height: 19px;
      //     padding: 0 5px;
      //     color: #fff;
      //     text-align: center;
      //     font-size: 12px;
      //   }
      img {
        height: 100%;
        width: 100%;
        object-fit: cover;
        border-radius: 5px;
        display: block;
      }
    }
  }

  .es-seckill-group.style-col .group .es-seckill-col .detail {
    width: 0;
    flex-grow: 1;
    font-size: 12px;
    margin-left: 15px;
    margin-right: 0;
    height: 90px;
    .title {
      font-size: 14px;
      overflow: hidden;
      text-overflow: ellipsis;
      color: #000000;
      height: 40px;
      white-space: normal;
    }
    .sales-num.col-num {
      //   padding-bottom: 10px;
      //   border-bottom: 0.5px solid #e5e5e5;
    }
    .sub-price {
      font-size: 12px;

      .icon {
        font-size: 12px;
      }

      &:not(.line-through) {
        font-size: 12px;
        color: #999999;
        font-weight: 600;
      }

      &.line-through {
        color: #999;
        text-decoration: line-through;
      }
    }

    .progress-box {
      position: relative;
      height: 15px;
      margin-bottom: 15px;

      .progress {
        width: 55%;
        height: 15px;
        border-radius: 10px;
        line-height: 16px;
        text-align: center;
        background-color: #f7cfcd;

        .progress-num {
          color: #fff;
          display: inline-block;
          height: 15px;
          border-radius: 10px;
        }
      }
    }

    .sales-num {
      .sales-btn {
        margin-left: 4px;
        border: 1px solid #fd463e;
        color: #fd463e;
        padding: 0 6px;
        border-radius: 4px;
        font-size: 12px;
        height: 26px;
      }
    }
  }

  .es-seckill-group.style-col .group .es-seckill-col .detail .price .num {
    color: #999ca7;
    font-size: 9px;
    line-height: 25px;
    margin-left: 6px;
  }

  .es-seckill-group.style-col .group .es-seckill-col .detail .price .flex {
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
  }

  .es-seckill-group.style-col .group .es-seckill-col .detail .price span {
    font-size: 16px;
  }
}
</style>
